<template>
	<view class="space-head">
		<image class="bg" :src="userDesc.wall + '?' + new Date().getTime().toString()" mode="aspectFill" @tap="imgDetail(user.wall)"></image>
		<view class="space-head-info">
			<image class="userpic" :src="user.avatar + '?' + new Date().getTime().toString()" @tap="imgDetail(user.avatar)"></image>
			<view class="name d-flex jc-center ai-center no-wrap">
				{{user.nickname}}
				<tag-sex-age :sex="user.sex" :birthday="userDesc.birthday" />
			</view>
			<view class="sign">
				<text>签名: </text>
				<text style="margin-left: 10upx;">{{userDesc.sign}}</text>
			</view>
			<user-space-menu v-if="user.id !== userId" />
		</view>
	</view>
</template>

<script>
	import tagSexAge from "components/common/tag-sex-age.vue"
	import userSpaceMenu from "./user-space-menu.vue"
	export default {
		props: ['user', 'userDesc'],
		data() {
			return {
				userId: null
			}
		},
		components: {
			tagSexAge,
			userSpaceMenu
		},
		methods: {
			imgDetail(url) {
				uni.previewImage({
					current: 0,
					urls: [url]
				})
			}
		},
		created() {
			this.userId = this.$Route.query.userId
		}
	}
</script>

<style lang="scss" scoped>
	.space-head {
		position: relative;
		width: 100%;

		.bg {
			width: 100%;
			height: 500upx;
		}

		.space-head-info {
			position: absolute;
			top: 80upx;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;

			.userpic {
				width: 130upx;
				height: 130upx;
				border-radius: 50%;
				border: 4upx solid #BBBBBB;
				box-sizing: border-box;
			}

			.name {
				color: #FFFFFF;
				font-size: 32upx;
				font-weight: bold;
				text-shadow: 2upx 2upx 10upx #333333;
				text-align: center;
				margin-right: 10upx;
			}

			.sign {
				color: #FFFFFF;
				font-size: 24upx;
				text-align: center;
			}

			.menu {
				.iconfont {
					margin-top: 30upx;
					background-color: #FFE933;
					border-radius: 10upx;
					text-align: center;
					font-size: 28upx;
					width: 100upx;
					padding: 1upx 10upx;

					&.active {
						background-color: rgba(255, 255, 255, .3);
					}
				}
			}
		}
	}
</style>
